<template>
  <!-- 合同初稿 -->
  <CommonTitle titleName="合同新增"></CommonTitle>

  <div class="box">
    <el-form
      :inline="true"
      label-width="120"
      :model="formInline"
      :rules="rules"
      ref="formRef"
      class="demo-form-inline"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="关联项目集">
            <el-input
              v-model="formInline.departmentName"
              disabled
              placeholder=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目集编号">
            <el-input
              v-model="formInline.projectSetName"
              disabled
              placeholder=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属部门">
            <el-input
              v-model="formInline.projectSetCode"
              disabled
              placeholder=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="关联项目">
            <el-input
              v-model="formInline.responsibleUserName"
              disabled
              placeholder=""
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="项目编号">
            <el-input
              v-model="formInline.projectCode"
              disabled
              placeholder=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="项目负责人">
            <el-input
              v-model="formInline.taskScore"
              disabled
              placeholder=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="关联任务">
            <el-input
              v-model="formInline.projectStage"
              disabled
              placeholder=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="任务编号">
            <el-input
              v-model="formInline.projectTask"
              disabled
              placeholder=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同签约方式">
            <el-select
              :disabled="state.disabled"
              v-model="formInline.signingMethod"
              placeholder=""
            >
              <el-option
                v-for="item in selectionTypeOptions"
                :key="item"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="关联工作细项">
            <el-select
              :disabled="state.disabled"
              v-model="formInline.signingMethod"
              placeholder=""
            >
              <el-option
                v-for="item in projectTendersWayList"
                :key="item"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="工作细项编号">
            <el-input
              v-model="formInline.projectTaskCode"
              disabled
              placeholder=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="签订份数">
            <el-input
              v-model.number="formInline.projectType"
              :disabled="state.disabled"
              placeholder=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="项目类型" prop="contractName">
            <el-input
              disabled
              v-model="formInline.contractName"
              placeholder=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务来源" prop="contractName">
            <el-input
              disabled
              v-model="formInline.contractName"
              placeholder=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="甲方单位" prop="contractId">
            <el-input
              :disabled="state.disabled"
              v-model="formInline.contractId"
              placeholder=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同履约期限" prop="serviceStartTime">
            <el-date-picker
              v-model="formInline.serviceStartTime"
              type="daterange"
              :disabled="state.disabled"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同类型" prop="signPartyB">
            <el-select
              :disabled="state.disabled"
              v-model="formInline.signingMethod"
              placeholder=""
            >
              <el-option
                v-for="item in projectTendersWayList"
                :key="item"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="乙方单位" prop="contractAmount">
            <el-input
              :disabled="state.disabled"
              v-model="formInline.contractAmount"
              placeholder=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同签订日期" prop="serviceStartTime">
            <el-date-picker
              v-model="formInline.signTime"
              type="date"
              size="meddle"
              :disabled="state.disabled"
              value-format="YYYY-MM-DD HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="资金流向" prop="warrantyExplain">
            <el-select
              :disabled="state.disabled"
              v-model="formInline.signingMethod"
              placeholder=""
            >
              <el-option
                v-for="item in selectionTypeOptions"
                :key="item"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="三方单位" prop="signTime">
            <el-input
              :disabled="state.disabled"
              v-model="formInline.contractContent"
              placeholder=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="质保期" prop="contractContent">
            <el-input
              :disabled="state.disabled"
              v-model="formInline.contractContent"
              placeholder=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同总额" prop="payExplain">
            <el-input
              v-model="formInline.payExplain"
              :disabled="state.disabled"
              placeholder=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同编码">
            <el-input
              :disabled="state.disabled"
              v-model="state.payItem.term"
              placeholder=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="合同内容" prop="remark">
            <el-input
              v-model="formInline.remark"
              :disabled="state.disabled"
              type="textarea"
              placeholder=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="支付方式" prop="remark">
            <el-input
              v-model="formInline.remark"
              :disabled="state.disabled"
              type="textarea"
              placeholder=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="formInline.remark"
              :disabled="state.disabled"
              type="textarea"
              placeholder=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="合同附件">
            <FileMinioUpload
              :restriction="true"
              :disabled="state.disabled"
              :restrictionLimit="9"
              v-model:files="formInline.files"
              :show-button="!state.disabled"
            ></FileMinioUpload>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="期数">
            <el-input
              v-model="formInline.remark"
              :disabled="state.disabled"
              placeholder=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="7">
          <el-form-item label="付款范围">
            <el-date-picker
              v-model="state.payItem.settlementStartTime"
              type="daterange"
              :disabled="state.disabled"
              range-separator="-"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="金额">
            <el-input
              :disabled="state.disabled"
              v-model="state.payItem.payableAmount"
              placeholder="金额"
            />
          </el-form-item>
        </el-col>
        <el-col :span="2" v-if="!state.disabled" style="margin-left: 20px">
          <el-form-item label="">
            <el-button @click="addRow">增加</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="合同结算方式"> </el-form-item>
          <tableCom
            class="table_class"
            :tableHead="tableHead"
            :tableData="tableData"
            :isRadio="false"
            border
            :height="300"
            :isSelection="false"
          >
            <template #operate>
              <el-table-column label="操作" width="200" align="center" fixed="right">
                <template #default="{ row }">
                  <el-button
                    :disabled="state.disabled"
                    size="small"
                    class="look"
                    type="primary"
                    @click="deleteHandler(row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </template>
          </tableCom>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input
              v-model="formInline.remark"
              :disabled="state.disabled"
              type="textarea"
              placeholder=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="相关附件">
            <FileMinioUpload
              :restriction="true"
              :disabled="state.disabled"
              :restrictionLimit="9"
              :files="formInline.files"
              :show-button="!state.disabled"
            ></FileMinioUpload>
          </el-form-item>
        </el-col>
        <p v-if="state.disabled">审批结果</p>
        <el-col :span="24" v-if="state.disabled">
          <el-form-item label="审批单编号">
            <el-input
              disabled
              v-model="formInline.approvalFormCode"
              placeholder=""
            />
          </el-form-item>
        </el-col>
        <el-col :span="24" v-if="state.disabled">
          <el-form-item label="审批状态">
            <el-select disabled
              v-model="formInline.examineStatus"
              placeholder="">
              <el-option value="1" label="审核中">
              </el-option>
              <el-option value="2" label="审核通过">
              </el-option>
              <el-option value="3" label="审核驳回">
              </el-option>

            </el-select>
            </el-form-item>
        </el-col>
        <el-col :span="24" v-if="state.disabled">
          <el-form-item label="查看审批流程">
            <el-button type="primary" @click="openHandler(formInline.routeUrl)">查看审批流程</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <span class="dialog-footer" v-if="!state.disabled">
      <el-button @click="submit">发起合同审批</el-button>
      <el-button type="primary" @click="goback"> 取消 </el-button>
    </span>
  </div>
</template>

<script setup>
import { contractApi } from '@/api/project'

import { ref, reactive, onBeforeMount, onMounted } from 'vue'
import {
  ElDialog,
  ElMessage,
  ElDatePicker,
  ElRow,
  ElCol,
  ElForm
} from 'element-plus'
import CommonTitle from '@/components/CommonTitle.vue'
import TableCom from '@/components/table/table.vue'
import { useRouter, useRoute } from 'vue-router'
import FileMinioUpload from "@/components/FileMinioUpload.vue";
import {
  getURLhandler,
  nanoid
} from '@/views/constructionProjectManage/static/utools.js'
import {selectionTypeOptions} from "@/common/dict/dictCollect";

let router = useRouter()
let route = useRoute()
const state = reactive({
  user: '',
  projectTaskId: '',
  projectId: '',
  payItem: {
    term: '',
    moneyFlowType: '',
    settlementStartTime: [],
    payId: nanoid()
  },
  disabled: false
})
const formInline = reactive({
  files: [],

  approvalFormCode: '', //审核结果相关字段
  apparovalStatus: '' //审核结果相关字段
})
const rules = {
  contractName: [
    { required: true, message: '合同名称不能为空', trigger: 'blur' }
  ],
  contractId: [
    { required: true, message: '合同编号不能为空', trigger: 'blur' }
  ],
  signPartyA: [
    { required: true, message: '签约甲方不能为空', trigger: 'blur' }
  ],
  signPartyB: [
    { required: true, message: '签约乙方不能为空', trigger: 'blur' }
  ],
  contractAmount: [
    { required: true, message: '合同金额不能为空', trigger: 'blur' }
  ],

  serviceStartTime: [
    { required: true, message: '服务期限不能为空', trigger: 'blur' }
  ],
  signTime: [
    { required: true, message: '合同签订日期不能为空', trigger: 'blur' }
  ],
  contractContent: [
    { required: true, message: '合同内容不能为空', trigger: 'blur' }
  ],
  payExplain: [
    { required: true, message: '支付方式不能为空', trigger: 'blur' }
  ],
  remark: [{ required: true, message: '备注不能为空', trigger: 'blur' }],
  files: [{ required: true, message: '议题附件不能为空', trigger: 'blur' }]
}
// 0:公开招标,1:择优比选,2:公开竞争性谈判,3:单一来源采购(公开),4:择优询价,5:邀请竞争性磋商,6:邀请竞争性谈判,7:单一 来源采购(非公开)
const projectTendersWayList = reactive([
  {
    label: '公开招标',
    value: '0'
  },
  {
    label: '择优比选',
    value: '1'
  },
  {
    label: '公开竞争性谈判',
    value: '2'
  },
  {
    label: '单一来源采购(公开)',
    value: '3'
  },
  {
    label: '择优询价',
    value: '4'
  },
  {
    label: '邀请竞争性磋商',
    value: '5'
  },
  {
    label: '邀请竞争性谈判',
    value: '6'
  },
  {
    label: '单一来源采购(非公开)',
    value: '7'
  }
])
const tableData = ref([])
// term: '',
//     moneyFlowType: 0,
//     settlementStartTime: [],
//     payId: nanoid()
const tableHead = ref([
  {
    prop: 'term',
    label: '期数'
  },
  {
    prop: 'moneyFlowType',
    label: '资金流向',
    formatter: (row) => {
      return row.moneyFlowType === 1 ? '流入' : '流出'
    }
  },
  {
    prop: 'settlementStartTime',
    label: '付款范围',
    formatter: (row) => {
      return row.settlementStartTime.join('-')
    }
  },
  {
    prop: 'payableAmount',
    label: '金额'
  }
])
const handel = () => {}
const deleteHandler = (row) => {
  tableData.value = tableData.value.filter((item) => item.payId !== row.payId)
}
const addRow = () => {
  state.payItem.payId = nanoid()
  tableData.value.push(JSON.parse(JSON.stringify(state.payItem)))
}
const goback = () => {
  router.go(-1)
}
const formRef = ref(null)
const submit = () => {
  formRef.value.validate(async (valid, fields) => {
    if (valid) {
      formInline.projectId = state.projectId
      formInline.tenderTaskId = state.projectTaskId
      let obj = JSON.parse(JSON.stringify(formInline))
      obj.serviceStartTime = formInline.serviceStartTime[0]
      obj.serviceEndTime = formInline.serviceStartTime[1]
      obj.payList = []
      tableData.value.forEach((item) => {
        obj.payList.push({
          term: item.term,
          moneyFlowType: item.moneyFlowType,
          settlementStartTime: item.settlementStartTime[0] + ' 00:00:00',
          settlementEndTime: item.settlementStartTime[1] + ' 00:00:00',
          payableAmount: item.payableAmount
        })
      })
      await contractApi.contractAdd(obj).then((res) => {
        if (res.code == '200') {
          ElMessage.success('操作成功')
          router.go(-1)
        }
      })
    }
  })
}
const openHandler=(url)=>{
  window.open(url)
}
onBeforeMount(() => {
  state.projectTaskId = getURLhandler(route.path).projectTaskId
  state.projectId = getURLhandler(route.path).projectId
  state.disabled = +getURLhandler(route.path).isLook
})
onMounted(() => {
    contractApi
      .contractLook({ taskId: state.projectTaskId, projectId: state.projectId })
      .then((res) => {
        if (res.code == '200') {
          for (const key in res.data) {
            if (Object.hasOwnProperty.call(res.data, key)) {
              if (key == 'serviceStartTime') {
                formInline[key] = [res.data[key], res.data['serviceEndTime']]
                continue
              }
              if (key == 'files') {
                formInline[key] = res.data[key] || []
                continue
              }
              if (key == 'payList') {
                if (res.data[key] && res.data[key].length > 0) {
                  res.data[key].forEach((item) => {
                    item.settlementStartTime = [
                      item.settlementStartTime,
                      item.settlementEndTime
                    ]
                  })
                  tableData.value = res.data[key]
                } else {
                  tableData.value = []
                }
                console.log(tableData.value)
                continue
              }
              formInline[key] = res.data[key]
            }
          }
        }
      })
})
</script>
<style>
/* .el-input__wrapper {
  width: 100%;
}
.el-date-editor {
  width: 100% !important;
} */
</style>
<style lang="scss" scoped>
.el-form-item,
.el-select {
  width: 100%;
}

.box {
  border-radius: 10px;
  border: 1px solid #e3e7f1;
  padding: 34px 90px;
}
.table_class {
  margin-top: 20px;
  margin-bottom: 20px;
}
</style>
